<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>注册页</title>
    <script src="/jquery/dist/jquery.min.js"></script>
    <script src="/jquery/jquery-form.js"></script>
    <script src="/layer/layer.js"></script>
    <script src="/layui/layui.js"></script>
    <script src="/commonjs/util.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/css/registForm.css">
</head>
<body style="padding-right: 40px;scroll:no">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend>用户注册</legend>
</fieldset>
<form class="layui-form" id="registForm" action="../../user/register" lay-filter="register">
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            <input type="text" name="username" lay-verify="username" autocomplete="off" placeholder="请输入用户名" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block">
            <input type="password" name="password" lay-verify="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">重复密码</label>
        <div class="layui-input-block">
            <input type="password" name="passwordTwice" lay-verify="passwordTwice" placeholder="请再次输入密码" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div>
            <label class="layui-form-label">所在城市</label>
            <div class="layui-input-inline">
                <select name="locationCity" lay-filter="chengshi" lay-verify="required">
                    <option value="">请选择您所在城市</option>
                    <option value="成都">成都</option>
                </select><div class="layui-unselect layui-form-select"><div class="layui-select-title"><input type="text" placeholder="请选择" value="阅读" readonly="" class="layui-input layui-unselect" name=""><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit"><dd lay-value="" class="layui-select-tips">请选择</dd><dd lay-value="0" class="">写作</dd><dd lay-value="1" class="layui-this">阅读</dd><dd lay-value="2" class="">游戏</dd><dd lay-value="3" class="">音乐</dd><dd lay-value="4" class="">旅行</dd></dl></div>
            </div>
        </div>
        <div class="layui-input-inline">
            <select name="locationArea" lay-filter="diqu" lay-verify="required">
                <option value="">请选择您所在区域</option>
                <option value="金牛区">金牛区</option>
                <option value="双流区">双流区</option>
                <option value="新都区">新都区</option>
                <option value="郫都区">郫都区</option>
                <option value="武侯区">武侯区</option>
                <option value="锦江区">锦江区</option>
                <option value="成华区">成华区</option>
            </select><div class="layui-unselect layui-form-select"><div class="layui-select-title"><input type="text" placeholder="请选择" value="阅读" readonly="" class="layui-input layui-unselect" name=""><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit"><dd lay-value="" class="layui-select-tips">请选择</dd><dd lay-value="0" class="">写作</dd><dd lay-value="1" class="layui-this">阅读</dd><dd lay-value="2" class="">游戏</dd><dd lay-value="3" class="">音乐</dd><dd lay-value="4" class="">旅行</dd></dl></div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">阅读偏好</label>
        <div class="layui-input-block">
            <input type="checkbox"  name="labels"value="1" title="武侠小说"><div class="layui-unselect layui-form-checkbox layui-form-checked"><span>武侠小说</span><i class="layui-icon layui-icon-ok"></i></div>
            <input type="checkbox" name="labels" value="2" title="悬疑推理"><div class="layui-unselect layui-form-checkbox"><span>悬疑推理</span><i class="layui-icon layui-icon-ok"></i></div>
            <input type="checkbox" name="labels" value="3"  title="中外名著"><div class="layui-unselect layui-form-checkbox"><span>中外名著</span><i class="layui-icon layui-icon-ok"></i></div>
        </div>
    </div>
    <div class="layui-form-item">
        <label  class="layui-form-label">邮箱地址</label>
        <div class="layui-input-inline">
            <input type="text" name="email" lay-verify="email" autocomplete="off" placeholder="请输入邮箱" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">邮箱验证码</label>
        <div class="layui-input-inline">
            <input type="text" name="emailCode" lay-verify="required|emailCode" autocomplete="off" placeholder="邮箱验证码" class="layui-input">
        </div>
        <div class="layui-input-inline">
            <input type="button" lay-verify="title" id="sendEmail" value="发送验证码" class="layui-btn layui-btn-radius" >
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit lay-filter="register">提交注册</button>
        </div>
    </div>
</form>
</body>
<script>
    var countdown=0;
    var timeClock;
    layui.use('form', function () {
        var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
        form.verify({
            username: function(value, item){ //value：表单的值、item：表单的DOM对象
                if(value.length==0){
                    return '用户名不能为空'
                }
                if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                    return '用户名不能有特殊字符';
                }
                if(/(^\_)|(\__)|(\_+$)/.test(value)){
                    return '用户名首尾不能出现下划线\'_\'';
                }
                if(/^\d+\d+\d$/.test(value)){
                    return '用户名不能全为数字';
                }
                if(value.length>30){
                    return '用户名过长'
                }
            },
            //我们既支持上述函数式的方式，也支持下述数组的形式
            //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
            password:[
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ],
            passwordTwice:function (value,item) {
                if(value!=$("input[name='password']").val()){
                    return "两次密码不一致"
                }
            },
            emailCode:function (value,item) {
                if(value!=getCookie("emailCode")){
                    return '邮箱验证码不正确'
                }
            }
        });
        form.render();
        form.val("register", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
            "username": "cursir" // "name": "value"
            ,"password": "nishizhume"
            ,"passwordTwice": "nishizhume"
            ,"email": "1170998607@qq.com"
            ,"emailCode": "123sad"
        });
    });
    $(function(){
        /** 注册表单提交，后台验证后的回调  */
        $("#registForm").ajaxForm(function(data){
            if(data.state==1){
                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                parent.layer.close(index); //再执行关闭
                parent.popMessage("注册成功")
            }
            else{
                parent.popMessage(data.message);
            }
        });
    });
    //表单验证规则

    $("#sendEmail").click(function(e){
        sendEmailHandle($(e.target));
    });

    function sendEmailHandle(btn) {
        var email = $("input[name='email']").val();
        //验证邮箱格式
        if(!email.match(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/))
        {
            popMessage("邮箱格式不正确！请重新输入");
            $("#email").focus();
            return false;
        }
        btn.attr('disabled','disabled');
        btn.addClass("layui-btn-disabled");
        if(timeClock){clearInterval(timeClock)};
        countdown = 10;
        timeClock=setInterval(function(){
            settime(btn);
        },1000);
        $.get("../../user/getEmailCode",{email:email},function (result) {
            console.log(result.message);
        })
    }
    function settime(val) {
        if (countdown === -1) {
            val.attr("disabled",false);
            val.removeClass("layui-btn-disabled");
            val.val("发送验证码");
        } else {
            val.val("重新发送(" + countdown + ")");
            countdown--;
        }
    }

</script>
